<template>
  <div>
    <el-table :data="worker" border style="width: 1980px;margin: auto;">
      <el-table-column prop="workerId" label="工人ID" width="200"></el-table-column>
      <el-table-column prop="workerName" label="工人姓名" width="120"></el-table-column>
      <el-table-column prop="workerPhone" label="联系方式" width="150"></el-table-column>
      <el-table-column
        prop="workerDepartment"
        label="工人部门"
        width="100"
        :filters="[{ text: '维修', value: '维修' }, { text: '安全检查', value: '安全检查' },{ text: '派工', value: '派工' }]"
        :filter-method="filterdepartment"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">{{scope.row.workerDepartment}}</template>
      </el-table-column>

      <el-table-column
        prop="workerSex"
        label="工人性别"
        width="100"
        :filters="[{ text: '男', value: '男' }, { text: '女', value: '女' }]"
        :filter-method="filterSex"
        filter-placement="bottom-end"
      >
        <template slot-scope="scope">{{scope.row.workerSex}}</template>
      </el-table-column>

      <el-table-column prop="workerAge" label="工人年龄" width="84"></el-table-column>
      <el-table-column prop="workerStar" label="工人星级" width="85"></el-table-column>
      <el-table-column label="操作" width="384">
        <template slot-scope="scope">
          <!-- <el-button type="primary" @click="loolwork(scope.row.workerId)" disabled>查看工人任务</el-button> -->
          <el-button type="primary" @click="edit(scope.row.workerId)">工人信息详情</el-button>
          <el-button type="primary" @click="todelete(scope.row.workerId)">删除</el-button>
          <el-dialog title="提示" :visible.sync="centerDialogVisible" width="30%" center>
            <span>确认删除访客记录吗？</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="centerDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="deleteById(pro_id)">确 定</el-button>
            </span>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin: 0 auto; 
    width:750px;
    border-width:5px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[1 , 10, 20, 30]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      centerDialogVisible: false,
      pro_id: "", //删除传值
      keyword: "",
      worker: [
        {
          workerId: "",
          workerDepartment: "",
          workerName: "",
          workerSex: "",
          workerAge: "",
          workerPhone: "",
          workerStar: ""
        }
      ],
      page: {
        size: 10, //页数量
        current: 1, //第几页
        total: 5 //总共
      }
    };
  },
  methods: {
    //分页
    handleSizeChange(val) {
      //分页的标记数，一页有多少数据。
      this.page.size = val;
      this.axios
        .post("worker/workerpage", this.page)
        .then(res => {
          console.log(res);
          this.page.total = res.data.total;
          this.page.size = res.data.size;
          this.page.current = res.data.current;
          this.worker = res.data.records;
        })
        .catch(err => {
          console.error(err);
        });
      console.log(`每页 ${val} 条`);
      console.log(val);
    },
    handleCurrentChange(val) {
      //当前是第几页
      this.page.current = val;
      this.axios
        .post("worker/workerpage", this.page)
        .then(res => {
          console.log(res);
          this.page.total = res.data.total;
          this.page.size = res.data.size;
          this.page.current = res.data.current;
          this.worker = res.data.records;
        })
        .catch(err => {
          console.error(err);
        });
      console.log(`当前页: ${val}`);
      console.log(val);
    },
    //工人信息详情
    edit(row) {
      this.$router.push({
        //传参用router，接参用route
        path: "/index_manager/updataworker",
        query: {
          id: row
        }
      });
      console.log("传值前：：：" + row);
    },
    loolwork(row) {
      console.log("查看工人任务:" + row);
    },
    deleteById(row) {
      //进行删除操作，delete方法
      this.axios
        .post("worker/deleteworker?workerId=" + row)
        .then(res => {
          console.log(res);
          if (res.data == "success") {
            this.$message({
              message: "已成功删除！！！",
              type: "warning"
            });
            window.location.reload();
          }
        })
        .catch(err => {
          console.error(err);
        });
      this.centerDialogVisible = false;
      console.log(row);
    },
    todelete(index) {
      this.centerDialogVisible = true;
      this.pro_id = index;
    },
    //工人部门
    filterdepartment(value, row) {
      return row.workerDepartment === value;
    },
    //工人性别
    filterSex(value, row) {
      return row.workerSex === value;
    }
  },
  created() {
    if (this.$route.query.keyword == null) {
      this.axios
        .post("worker/workerpage", this.page)
        .then(res => {
          this.page.total = res.data.total;
          this.page.size = res.data.size;
          this.page.current = res.data.current;
          this.worker = res.data.records;
          console.log(res);
        })
        .catch(err => {
          console.error(err);
        });
    } else {
      //查找
      this.axios
        .post(
          "worker/searchworker?keyword=" +
            this.$route.query.keyword
        )
        .then(res => {
          if (res.data[0] != null) {
            this.worker = res.data;
            console.log(res);
          } else {
            this.$alert("查无此人", "查找", {
              confirmButtonText: "确定",
              callback: action => {
                this.axios
                  .post("worker/workerpage", this.page)
                  .then(res => {
                    this.page.total = res.data.total;
                    this.page.size = res.data.size;
                    this.page.current = res.data.current;
                    this.worker = res.data.records;
                  })
                  .catch(err => {
                    console.error(err);
                  });
              }
            });
          }
        })
        .catch(err => {
          console.error(err);
        });
    }
  },
  components: {}
};
</script>

<style scope>
.showdiv {
  border: solid 1px #df1111;
}
</style>
